<html>
<head>
<title> Graph Test </title>

<!--Load the necessary jquery, google visualization APIs-->
<script type="text/javascript" src="/js/jstree/_lib/jquery.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load('visualization', '1.0', {'packages':['corechart', 'table']});
google.setOnLoadCallback(ChartFiller); 


function ChartFiller() {
  var response1, response2;

  // Wait until all data is fetched to generate graphs
  $(document).ajaxStop(function() {
    $(this).unbind("ajaxStop");
    drawChart(response1, response2);
  });

  // Get the first set of data pairs
  $.ajax({
    type: "GET",
    url: "/metric-data/GLBPsnr/good/bus_cif.y4m/52ec78be7d6c8f103e63a76e3e14ded48ccd5cd7",
    success: function(response){
      response1 = response;
    },
  });

  // Get the second set - this should not be the same url in practice
  $.ajax({
    type: "GET",
    url: "/metric-data/GLBPsnr/good/bus_cif.y4m/52ec78be7d6c8f103e63a76e3e14ded48ccd5cd7",
    success: function(response){
      response2 = response;
    },
  });
}


function drawChart(data_in1, data_in2) {
  var data1 = new google.visualization.DataTable();
  data1.addColumn('number', 'X');
  data1.addColumn('number', 'Y');
  data1.addRows(data_in1);

  var data2 = new google.visualization.DataTable();
  data2.addColumn('number', 'X');
  data2.addColumn('number', 'Z');
  data2.addRows(data_in2);

  // Join the two tables into one view
  var view = new google.visualization.data.join(data1, data2, 'full', [[0,0]], [1], [1]);
  //$("#result").text(view.toJSON());

  // Set chart options
  var options = {'title':'Test Graph',
                 'width':400,
                 'height':300};

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  var table = new google.visualization.Table(document.getElementById('table_div'));
  chart.draw(view, options);
  table.draw(view, options);
}
</script>

</head>
  <body>
    <!--Div that will hold the chart-->
    <div id="result"></div>
    <div id="chart_div"></div>
    <div id="table_div"></div>
  </body>
</html>

